import React, { useEffect, useState, useRef } from 'react'
import { Link } from 'react-router-dom'
import { Header, TabBar, ShopList } from 'src/components'
import { msiteFoodTypes } from 'src/api/getData'
import { imgBaseUrl } from 'src/config/env'
import { useSelector } from 'react-redux'
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Pagination, Autoplay } from 'swiper';
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.scss';
import 'swiper/components/pagination/pagination.scss'
import './index.scss'

SwiperCore.use([Pagination, Autoplay]);

const Msite = () => {

    const [foodTypes, setFoodTypes] = useState([])
    const { geohash, cityName } = useSelector(state => state)
    // const imgBaseUrl = 'https://fuss10.elemecdn.com' //图片域名地址
    const scrollParentRef = useRef()

    useEffect(() => {
        if (geohash) {
            msiteFoodTypes(geohash).then(res => {
                let resLength = res.data.length;
                let resArr = [...res.data]; // 返回一个新的数组
                let foodArr = [];
                for (let i = 0, j = 0; i < resLength; i += 8, j++) {
                    foodArr[j] = resArr.splice(0, 8);
                }
                setFoodTypes(foodArr)
            })
        }
    }, [geohash])

    const getCategoryId = (url) => {
        let urlData = decodeURIComponent(url.split('=')[1].replace('&target_name', ''));
        if (/restaurant_category_id/gi.test(urlData)) {
            return JSON.parse(urlData).restaurant_category_id.id
        } else {
            return ''
        }
    }

    return <div className="page_msite" ref={scrollParentRef}>
        <Header signinUp
            search={<Link to='/search' className="link_search">
                <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <circle cx="8" cy="8" r="7" stroke="rgb(255,255,255)" strokeWidth="1" fill="none" />
                    <line x1="14" y1="14" x2="20" y2="20" style={{
                        stroke: 'rgb(255,255,255)',
                        strokeWidth: 2
                    }} />
                </svg>
            </Link>}
            msiteTitle={<Link to="/home" className="msite_title">
                <span className="title_text ellipsis">{cityName}</span>
            </Link>}
        />
        <nav className="msite_nav">
            {
                foodTypes.length > 0 ?

                    <Swiper
                        tag='section'
                        wrapperTag='ul'
                        // spaceBetween={1}
                        // slidesPerView={1}
                        speed={2000}
                        autoplay={{
                            delay: 2000,
                            disableOnInteraction: false
                        }}
                        pagination={{ clickable: true }}
                        // onSwiper={(swiper) => console.log(swiper)}
                        // onSlideChange={() => console.log('slide change')}
                        loop
                    >
                        {
                            foodTypes.map((item, index) => {
                                return <SwiperSlide
                                    tag="li"
                                    key={index}
                                    className="food_types_container"
                                >
                                    {
                                        item.map(foodItem => {
                                            return <Link
                                                to={`/food?geohash=${geohash}&title=${foodItem.title}&restaurant_category_id=${getCategoryId(foodItem.link)}`}
                                                className="link_to_food"
                                                key={foodItem.id}>
                                                <figure>
                                                    <img src={`${imgBaseUrl}${foodItem.image_url}`} alt="" />
                                                    <figcaption>{foodItem.title}</figcaption>
                                                </figure>
                                            </Link>
                                        })
                                    }
                                </SwiperSlide>
                            })
                        }
                    </Swiper> : <img src="/images/fl.svg" className="fl_back animation_opactiy" alt="" />
            }
        </nav>
        <div className="shop_list_container">
            <header className="shop_header">
                <svg className="shop_icon">
                    <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#shop"></use>
                </svg>
                <span className="shop_header_title">附近商家</span>
            </header>
            {geohash && <ShopList scrollParentRef={scrollParentRef} />}
        </div>
        <TabBar />
    </div>
}

export default Msite